<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<style>
img.avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.boxCont{
    position:relative;
}
</style>
<body>
    <div class="aui-content">
        <ul class="aui-waterfall" id="aui-waterfall"> 
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/demo1.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/demo2.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/48.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/demo2.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/47.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/demo3.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/demo5.png" />
                </div>
                <div class="aui-waterfall-body">
                    瀑布流的效果
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        流浪男
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
        </ul> 
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-waterfall.js" ></script>
<script type="text/javascript">
$aui.waterfall($api.byId("aui-waterfall"),{
    col:2,//列数
    padding:10,//容器内边距
    space:10//列间距
});

apiready = function(){
    
}

</script>
</html>